import React, { Component, Fragment } from "react";
import {
  Text,
  View,
  ScrollView,
  StyleSheet,
  Dimensions,
  FlatList,
  Image
} from "react-native";
//import console = require("console");
import HttpUtil from "../../Utils/utils/HttpUtils";
import { Grid } from "@ant-design/react-native";
var { height, width } = Dimensions.get("window");
var col = 5;
var boxW = 100;
var vMargin = (width - col * boxW) / (col + 1);
var hMargin = 25;
class Top extends Component {
  constructor() {
    super();
    this.state = {
      colorArr: ["white", "white"],
      currentPage: 0,
      image1: [],
      image2: []
    };
  }
  OnScrollEnd(e) {
    var currentPage = Math.round(e.nativeEvent.contentOffset.x / width);
    //console.log(currentPage);
    this.setState({
      currentPage: currentPage
    });
  }
  componentDidMount() {
    HttpUtil.get("http://192.168.1.9:8080/native/cate1.json").then(res => {
      console.log(res);
      this.setState({
        image1: res.data
      });
    });
    HttpUtil.get("http://192.168.1.9:8080/native/cate2.json").then(res => {
      console.log(res);
      this.setState({
        image2: res.data
      });
    });
  }
  render() {
    console.log(this.state.image1);
    console.log(this.state.image2);
    const data = Array.from(this.state.image1).map((_val, i) => ({
      icon: _val.url,
      text: _val.name
    }));
    const data1 = Array.from(this.state.image2).map((_val, i) => ({
      icon: _val.url,
      text: _val.name
    }));
    return (
      <Fragment>
        <View style={styles.container}>
          <ScrollView
            horizontal={true}
            pagingEnabled={true}
            showsHorizontalScrollIndicator={false}
            onMomentumScrollEnd={e => {
              this.OnScrollEnd(e);
            }}
          >
            {this.state.colorArr.map((res, i) => {
              var dataSouce = i === this.state.currentPage ? data : data1;
              if (i === 0) {
                return (
                  <View
                    style={{ backgroundColor: res, height: 160, width: width }}
                    key={i}
                  >
                    <Grid
                      data={data}
                      columnNum={5}
                      itemStyle={{ height: 80, backgroundColor: "#fff" }}
                      hasLine={false}
                    />
                  </View>
                );
              } else {
                return (
                  <View
                    style={{ backgroundColor: res, height: 160, width: width }}
                    key={i}
                  >
                    <Grid
                      data={data1}
                      columnNum={5}
                      itemStyle={{ height: 80, backgroundColor: "#fff",padding:0 }}
                      hasLine={false}
                    />
                  </View>
                );
              }
            })}
          </ScrollView>
          <View
            style={{
              flexDirection: "row",
              justifyContent: "center",
              height: 30,
              width: width
            }}
          >
            {this.state.colorArr.map((res, i) => {
              console.log(i, this.state.currentPage);
              var style =
                i === this.state.currentPage
                  ? { color: "orange" }
                  : { color: "gray" };
              return (
                <Text
                  style={[{ fontSize: 20, marginBottom: 10 }, style]}
                  key={i}
                >
                  &bull;
                </Text>
              );
            })}
          </View>
        </View>
      </Fragment>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff"
  }
});
export default Top;
